<template>
    <div class="box">
        <mu-container>
            <div class="content">
                <div class="header-img"><img src="@/assets/logo.png" width="50%" alt=""></div>
                <mu-form :model="validateForm" ref="form" class="input-class">
                    <mu-form-item label="手机号" prop="userphone" :rules="userphoneRules">
                        <mu-text-field v-model="validateForm.userphone" prop="userphone"></mu-text-field>
                    </mu-form-item>
                    <mu-form-item label="密码" prop="password" :rules="passwordRules">
                        <mu-text-field type="password" v-model="validateForm.password" prop="password"
                                       action-icon="">
                        </mu-text-field>
                    </mu-form-item>
                </mu-form>
            </div>
            <div class="button-class">
                <mu-button color="primary"
                           class="submit"
                           v-loading="loadingSubmit"
                           data-mu-loading-size="24"
                           @click="submit()">登录

                </mu-button>
                <div class="reg-reb">
                    <div class="align" @click="goRouter('register')">
                        <mu-icon value="cached" right size="14"></mu-icon>
                        <span>没有账号？</span>
                    </div>
                    <span class="score">|</span>
                    <div class="align" @click="goRouter('remenber')">
                        <mu-icon value="undo" right size="14"></mu-icon>
                        <span>忘记密码？</span>
                    </div>
                </div>
            </div>
        </mu-container>
    </div>
</template>

<script>
export default {
    name: 'login',
    data(){
        return {
            validateForm: {
                userphone: '',
                password: ''
            },
            loadingSubmit: false,
            userphoneRules: [
                {validate: (val) => !!val, message: '请输入手机号'},
                {validate: (val) => val.length === 11, message: '请输入正确的手机号'}
            ],
            passwordRules: [
                {validate: (val) => !!val, message: '必须填写密码'},
                {validate: (val) => val.length >= 6, message: '密码长度大于6'}
            ],
        }
    },
    mounted(){
    },
    methods: {
        submit(){
            this.$refs.form.validate().then(result => {
                if (result) {
                    const para = this.validateForm;
                    this.loadingSubmit = true;
                    this.$util.login(para)
                        .then((data) => {
                            this.$router.replace('/')
                        })
                        .catch(e => {
                            this.$toast.error(e.code + ' ' + e.msg)
                        })
                        .finally(() => {
                            this.loadingSubmit = false;
                        })
                }
            });
        },
        goRouter(msg = ''){
            if (msg) {
                this.$router.push(`/${msg}`)
            }
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
    .box
        .content
            margin-top .4rem
            .input-class
                margin 0 auto
                margin-top .4rem
                width 70%
                text-align left
        .button-class
            margin-top .4rem
            .submit
            .register
                width 60%
                margin-bottom .1rem
            .reg-reb
                display flex
                flex-direction row
                justify-content center
                align-items center
                margin-top .2rem
                color #aaa
                .score
                    padding 0 .1rem
                    font-weight bold
                    color blue
                .align
                    display inherit
                    align-items center
</style>
